<#include "/common/layout.ftl">


<@layout >
    <div class="frame-content" style="background: white;">

        <div class="card">
            <div class="card-body">
                <form id="addFiledForm" method="post" class="form-horizontal">
                    <#list widgetAttr as wda>
                        <div class="form-group">
                            <label class="col-xs-2 text-right control-label"
                                   for="${wda.title }_widget">
                                ${wda.title }
                            </label>
                            <div class="col-xs-9">
                                <#switch wda.title>
                                    <#case 'readonly'>
                                        <label class="lyear-radio  checkbox-inline radio-success">
                                            <input type="radio" value="false" name="${wda.title }">
                                            <span>只读</span>
                                        </label>
                                        <label class="lyear-radio checkbox-inline radio-success">
                                            <input type="radio" checked value="true" name="${wda.title }">
                                            <span>读写</span>
                                        </label>
                                        <#break>
                                    <#case 'required'>
                                        <label class="lyear-radio  checkbox-inline radio-success">
                                            <input type="radio" value="false" name="${wda.title }">
                                            <span>必填</span>
                                        </label>
                                        <label class="lyear-radio checkbox-inline radio-success">
                                            <input type="radio" checked value="true" name="${wda.title }">
                                            <span>不必填</span>
                                        </label>
                                        <#break>

                                    <#case 'call'>
                                        <label class="lyear-radio  checkbox-inline radio-success">
                                            <input type="radio" value="true" name="${wda.title }">
                                            <span>反射处理</span>
                                        </label>
                                        <label class="lyear-radio checkbox-inline radio-success">
                                            <input type="radio" value="false" checked name="${wda.title }">
                                            <span>不处理</span>
                                        </label>
                                        <#break>
                                    <#case 'tree'>
                                        <label class="lyear-radio  checkbox-inline radio-success">
                                            <input type="radio" value="true" name="${wda.title }">
                                            <span>树结构</span>
                                        </label>
                                        <label class="lyear-radio checkbox-inline radio-success">
                                            <input type="radio" value="false" checked name="${wda.title }">
                                            <span>默认</span>
                                        </label>
                                        <#break>
                                    <#default >
                                        <input class="form-control"
                                               type="text"
                                               name="${wda.title }"
                                               id="${wda.title }_widget"
                                               placeholder="${wda.description }"
                                               value="${wda.value }">
                                </#switch>


                            </div>
                        </div>
                    </#list>
                    <div class="form-group" id="data-source" style="display: none;">
                        <label class="col-xs-2 text-right control-label"
                               for="source_widget">
                            数据源
                        </label>

                        <div class="clearfix col-xs-9" style="padding-left: 0">
                            <div class="col-xs-6">
                                <select class="form-control select2 class-names" name="class_name">
                                    <option value="">--数据源的类--</option>
                                    <#list classItems as cst>
                                        <option value="${cst }">${cst }</option>
                                    </#list>
                                </select>

                            </div>
                            <div class="col-xs-6" style="padding-left: 0;">
                                <select class="form-control select2 methods" name="method_name">
                                    <option value="">--数据源的方法--</option>
                                </select>
                            </div>
                            <div class="help-block col-xs-9">
                                * 反射处理 为true 的时候 这个是必须选择的
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-2 control-label">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">规则 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <#list rules as rs>
                                        <li><a href="#!" class="rule-btn"
                                               data-name="${rs.title }"
                                               data-description="${rs.description }">${rs.description }</a></li>
                                    </#list>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-9 ">
                            <div id="ruleList">
                                <div class="rule-item m-b-5">

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <button class="btn btn-primary" id="addField" type="submit">添加字段</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</@layout>
<@style>

</@style>
<@script>
    <script type="text/javascript">
        var validateCfg = {
            name: {
                validators: {
                    notEmpty: {
                        message: 'name 不能为空'
                    }
                }
            },
            label: {
                validators: {
                    notEmpty: {
                        message: 'label 不能为空'
                    }
                }
            },
            id: {
                validators: {
                    notEmpty: {
                        message: 'id 不能为空'
                    }
                }
            },
            source: {
                validators: {
                    notEmpty: {
                        message: 'source 请映射service层的数据源 例如：TestServiceImpl.method'
                    }
                }
            },
            url: {
                validators: {
                    notEmpty: {
                        message: 'url 请填写上传地址 例如：/admin/upload'
                    }
                }
            }

        };
        var call = $('[name=call]');

        call.on('click', function () {

            if ($('[name=call]:checked').val() == 'true') {

                $('#data-source').show();


            } else {
                delete validateCfg.class_name;
                delete validateCfg.method_name;
                $('#data-source').hide();
            }

        });

        var ruleHtmlTpl = '<div class="rule-item m-b-5">\n' +
            '                              <div class="input-group">\n' +
            '                                 <span class="input-group-addon">{0}</span>\n' +
            '                                 <input type="text" class="form-control" placeholder="{1}" name="r_{2}" >\n' +
            '                                 <span class="input-group-btn">\n' +
            '                                   <button class="btn btn-danger del-rule" type="button">删除</button>\n' +
            '                                 </span>\n' +
            '                              </div>\n' +
            '                          </div>';

        $('.rule-btn').on('click', function () {
            if ($('.rule-item').size() <= $('.rule-btn').size()) {
                var name = $(this).data('name');
                var description = $(this).data('description');
                var html = ruleHtmlTpl.format(name, description, name);
                $('#ruleList').append(html);
            } else {
                HsUtils.notify('超出最大定义规则数了', Const.notifyType.DANGER);

            }

        });
        $('.class-names').on('change', function () {
            var val = $(this).val();
            if (!val) return;
            HsUtils.ajax('/admin/form/get_methods_by_class', {class_name: val}, function (data) {
                for (var i = 0, len = data.length, methodsOptions = '<option value="">--数据源的方法--</option>'; i < len; i++) {
                    var name = data[i];
                    methodsOptions += `<option value="{0}">{1}</option>`.format(name, name);
                    $('.methods').html(methodsOptions);
                }
            })
        });


        $(document).on('click', '.del-rule', function () {
            $(this).parents('.rule-item').remove();
        });

        HsUtils.validateForm("#addFiledForm", validateCfg, function () {
            var serialization = HsUtils.formSerialization('#addFiledForm');
            serialization.type = '${RequestParameters['type']}';
            serialization.mappingMethod = serialization.class_name + '.' + serialization.method_name;
            var newSerialization = {};
            var rules = {};
            for (var i in serialization) {
                if (i.indexOf('r_') != -1) {
                    var k = i.replace('r_', '');
                    rules[k] = serialization[i];

                } else {
                    newSerialization[i] = serialization[i];

                }
            }
            newSerialization.rules = rules;
            window.parent.addFiled(newSerialization);
        }, false);


    </script>
</@script>
